<template>
	<view class="box">
		<!-- 占位 -->
		<view class="placeholder">卫生管理监督系统</view>
		<!-- 注册表单 -->
		<u-form :model="form" ref="uForm" label-width="120rpx" label-align="center">
			<!-- 用户名区域 -->
			<u-form-item label="用户名" prop="username" borderBottom>
				<view class="input_Verification">
					<u--input v-model="form.username" :clearable="false" placeholder="请输入用户名"
						maxlength="8" type="text" border="none" :focus="true"></u--input>
				</view>
			</u-form-item>
			<!-- 学号区域 -->
			<u-form-item label="学号" prop="student_id" borderBottom>
				<u--input v-model="form.student_id" :clearable="false" placeholder="请输入学号"
					maxlength="10" type="number" border="none"></u--input>
			</u-form-item>
			<!-- 密码区域 -->
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="form.password" :clearable="false" placeholder="请输入密码"
					maxlength="10" type="text" password border="none"></u--input>
			</u-form-item>
		</u-form>

		<view class="btn">
			<u-button type="primary" @click="submit" shape="circle" size="normal" text="注册"></u-button>
		</view>
		<!-- 消息提示应用 -->
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					student_id: '',
					password: '',
					username: '',
				},
				rules: {
					student_id: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'blur',
						},
						{
							pattern: /^[12][0-9]{7}[0-6][0-9]$/,
							message: '该学号不存在',
							trigger: 'blur',
						}
					],
					password: [{
						required: true,
						min: 6,
						message: '请输入密码,6-10位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},
					{pattern: /^[A-Za-z0-9]+$/, message: '密码只能为数字或字母', trigger: 'blur'}],
					username: [{
							required: true,
							min: 2,
							message: '请输入用户名',
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'blur',
						},
						{ pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '只能输入中文、字母、数字', trigger: 'blur'}
					],
				},
			}
		},
		methods: {
			submit() {
				// validate 对整个表单进行校验的方法
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 前端校验成功
						// 调用后台接口检验邮箱是否存在，存在，则提示该邮箱已注册
						// 不存在，则提示该邮箱注册成功
					} else {
						// 前端校验失败
						this.$refs.uToast.show({
							title: "格式错误",
							type: 'error',
							position: 'top',
						})
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// setRules 调用此方法，设置校验规则
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss">
	.box {
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom right,  #7A88FF, #7AFFAF);
		height: 100vh;
		width: 100%;
	}

	/* 占位 */
	.placeholder {
		margin: 150rpx auto;
		margin-bottom: 100rpx;
		font-size: 60rpx;
		line-height: 100rpx;
	}

	/* 表单区域 */
	.u-form {
		width: 70%;
		margin: 0 15%;
	}

	.u-form-item {
		background-color: #fff;
		border-radius: 60rpx;
		margin-bottom: 20rpx;
	}

	.btn {
		width: 200rpx;
		height: 120rpx;
		margin: 30rpx auto;
	}
</style>
